// 此页面是数据可视化右边充电占比的动态有数据时才显示

// 加载充电站比图表 -- 横向图
function chargePercentText() {
  let total = charge + charging + piles + 100;
  var num1 = "";
  var num2 = "";
  var num3 = "";
  num1 =
    charge + 18 <= 0
      ? "0%"
      : Math.round(((charge + 18) / total) * 10000) / 100.0 + "%";
  num2 =
    charging + 32 <= 0
      ? "0%"
      : Math.round(((charging + 32) / total) * 10000) / 100.0 + "%";
  num3 =
    piles + 50 <= 0
      ? "0%"
      : Math.round(((piles + 50) / total) * 10000) / 100.0 + "%";

  if (num1 == "0%" && num2 == "0%" && num3 == "0%") {
    document.getElementById("electricBgc").style.display = "none"; // 换电柜
    document.getElementById("tankBgc").style.display = "none"; // 充电柜
    document.getElementById("pileBgc").style.display = "none"; // 充电桩
    return;
  }
  document.getElementById("pileBgc").style.width = num3; // 充电桩

  document.getElementById("tankBgc").style.width = num2; // 充电柜
  document.getElementById("electricBgc").style.width = num1; // 换电柜
  $("#pileBgc>span").html(`充电桩${num3}`);
  $("#tankBgc>span").html(`充电柜${num2}`);
  $("#electricBgc>span").html(`换电柜${num1}`);
}
// 充电站比---圆环图
function chargePercentPie() {
  var colorList = ["#e91a46", "#40a2e5", "#00dc50"];
  option = {
    // 控制title位置、样式
    title: {
      text: "充电占比",
      x: "center",
      y: "43%",
      textStyle: {
        fontSize: 14,
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "item",
    },
    // 控制圆环样式
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["50%", "65%"],

        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 3,
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList[params.dataIndex];
            },
          },
        },
        // 隐藏字体，用%代替
        label: {
          show: true,
          position: "outside",
          formatter: "{b}{d}%",
          fontSize: 13,
          color: "#e91ac4",
        },
        labelLine: {
          normal: {
            length: 10,
            length2: 5,
            lineStyle: {
              width: 1,
            },
          },
        },
        // 控制%
        data: [
          {
            name: "充电柜",
            value: charging + 32,
          },
          {
            name: "换电柜",
            value: charge + 18,
          },
          {
            name: "充电桩",
            value: piles + 50,
          },
        ],
      },
    ],
  };
  var rechargeAnswer = echarts.init($(".rechargeAnswer #answerPicture")[0]);
  rechargeAnswer.setOption(option);
}

setTimeout(() => {
  chargePercentPie();
  chargePercentText();
}, 1000);

window.clearTimeout();
